import React, { useState } from "react";
import {
  Alert,
  Image,
  ScrollView,
  StyleSheet,
  Text,
  TextInput,
  TouchableOpacity,
  View,
} from "react-native";
import {
  AVATAR_COLORS,
  generateAvatar,
  generateDiceBearAvatar,
  generateUIAvatar,
  generateViaAvatar,
} from "../../utils/avatarGenerator";

export default function AvatarExample() {
  const [username, setUsername] = useState("admin");
  const [size, setSize] = useState("100");

  const avatarSize = parseInt(size) || 100;

  const handleGenerateAvatar = () => {
    if (!username.trim()) {
      Alert.alert("错误", "请输入用户名");
      return;
    }
  };

  const renderAvatarRow = (title: string, avatarUrl: string) => (
    <View style={styles.avatarRow}>
      <Text style={styles.avatarTitle}>{title}</Text>
      <Image
        source={{ uri: avatarUrl }}
        style={[styles.avatar, { width: avatarSize, height: avatarSize }]}
      />
      <Text style={styles.avatarUrl} numberOfLines={1}>
        {avatarUrl}
      </Text>
    </View>
  );

  return (
    <ScrollView style={styles.container}>
      <Text style={styles.title}>头像生成器示例</Text>

      <View style={styles.inputContainer}>
        <TextInput
          style={styles.input}
          placeholder="输入用户名"
          value={username}
          onChangeText={setUsername}
        />

        <TextInput
          style={styles.input}
          placeholder="头像大小"
          value={size}
          onChangeText={setSize}
          keyboardType="numeric"
        />

        <TouchableOpacity style={styles.button} onPress={handleGenerateAvatar}>
          <Text style={styles.buttonText}>生成头像</Text>
        </TouchableOpacity>
      </View>

      <View style={styles.avatarContainer}>
        {renderAvatarRow(
          "默认头像 (UI Avatars)",
          generateAvatar(username, { size: avatarSize })
        )}

        {renderAvatarRow(
          "UI Avatars (圆角)",
          generateUIAvatar(username, { size: avatarSize, rounded: true })
        )}

        {renderAvatarRow(
          "UI Avatars (方形)",
          generateUIAvatar(username, { size: avatarSize, rounded: false })
        )}

        {renderAvatarRow(
          "Via Placeholder",
          generateViaAvatar(username, { size: avatarSize })
        )}

        {renderAvatarRow(
          "DiceBear",
          generateDiceBearAvatar(username, { size: avatarSize })
        )}
      </View>

      <View style={styles.colorPalette}>
        <Text style={styles.paletteTitle}>可用颜色方案</Text>
        <View style={styles.colorRow}>
          {AVATAR_COLORS.slice(0, 10).map((color, index) => (
            <View
              key={index}
              style={[styles.colorSwatch, { backgroundColor: color }]}
            />
          ))}
        </View>
        <View style={styles.colorRow}>
          {AVATAR_COLORS.slice(10, 20).map((color, index) => (
            <View
              key={index + 10}
              style={[styles.colorSwatch, { backgroundColor: color }]}
            />
          ))}
        </View>
      </View>

      <View style={styles.usageExample}>
        <Text style={styles.exampleTitle}>使用示例</Text>
        <Text style={styles.codeBlock}>
          {`import { generateAvatar } from '@/utils/avatarGenerator';

// 基本使用
const avatarUrl = generateAvatar('admin');

// 自定义选项
const customAvatar = generateAvatar('admin', {
  size: 150,
  backgroundColor: '#FF6B6B',
  textColor: 'fff',
  bold: true,
  rounded: true
});`}
        </Text>
      </View>
    </ScrollView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 20,
    backgroundColor: "#fff",
  },
  title: {
    fontSize: 24,
    fontWeight: "bold",
    textAlign: "center",
    marginBottom: 30,
  },
  inputContainer: {
    marginBottom: 30,
  },
  input: {
    borderWidth: 1,
    borderColor: "#ddd",
    borderRadius: 8,
    padding: 12,
    marginBottom: 15,
    fontSize: 16,
  },
  button: {
    backgroundColor: "#007AFF",
    padding: 15,
    borderRadius: 8,
    alignItems: "center",
  },
  buttonText: {
    color: "#fff",
    fontSize: 16,
    fontWeight: "bold",
  },
  avatarContainer: {
    marginBottom: 30,
  },
  avatarRow: {
    marginBottom: 20,
    alignItems: "center",
  },
  avatarTitle: {
    fontSize: 16,
    fontWeight: "bold",
    marginBottom: 10,
  },
  avatar: {
    borderRadius: 50,
    marginBottom: 10,
  },
  avatarUrl: {
    fontSize: 12,
    color: "#666",
    textAlign: "center",
    maxWidth: "90%",
  },
  colorPalette: {
    marginBottom: 30,
  },
  paletteTitle: {
    fontSize: 18,
    fontWeight: "bold",
    marginBottom: 15,
  },
  colorRow: {
    flexDirection: "row",
    justifyContent: "space-around",
    marginBottom: 10,
  },
  colorSwatch: {
    width: 30,
    height: 30,
    borderRadius: 15,
    marginHorizontal: 5,
  },
  usageExample: {
    backgroundColor: "#f5f5f5",
    padding: 15,
    borderRadius: 8,
    marginBottom: 20,
  },
  exampleTitle: {
    fontSize: 16,
    fontWeight: "bold",
    marginBottom: 10,
  },
  codeBlock: {
    fontFamily: "monospace",
    fontSize: 12,
    color: "#333",
    lineHeight: 18,
  },
});
